<template>
  <div>
    <van-nav-bar title="首页" left-text="返回" @click-left="onClickLeft"/>
    <van-notice-bar
      left-icon="volume-o"
      text="欢迎使用小璋璋健康信息管理平台，欢迎使用小璋璋健康信息管理平台"
    />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <template>
          <img
            src="https://preview.qiantucdn.com/ing/74/09/68/32Y58PICn3mSBybfiIwPE_PIC2018.jpg!qt324new_nowater"
            alt=""
          />
        </template>
      </van-swipe-item>
      <van-swipe-item>
        <template>
          <img
            src="https://preview.qiantucdn.com/ing/30/89/25/41M58PICxVQ4ACkuWpNGe_PIC2018.jpg!qt324new_nowater"
            alt=""
        /></template>
      </van-swipe-item>
      <van-swipe-item
        ><template
          ><img
            src="https://preview.qiantucdn.com/paixin/90/71/53/28Y58PICN2rkTfi5V5uYT_PIC2018.jpg!qt324new_nowater"
            alt="" /></template
      ></van-swipe-item>
      <van-swipe-item
        ><template
          ><img
            src="https://preview.qiantucdn.com/58pic/36/41/43/07w58PIC8eMa72Z7e2cR1_PIC2018.jpg!qt324new_nowater"
            alt="" /></template
      ></van-swipe-item>
    </van-swipe>
    <van-divider content-position="left" :style="{ color: 'lightskyblue' }"
      >医疗知识查询/快捷操作</van-divider
    >
    <van-grid :column-num="3">
      <van-grid-item
        v-for="item in menuList"
        :key="item.id"
        @click="pathing(item.path)"
        >
        <i :class="item.class"></i>
        <span>{{item.text}}</span>
      </van-grid-item>
    </van-grid>
    <van-divider content-position="left" :style="{ color: '#f40' }"
      >健康小知识</van-divider
    >
    <div class="doctor">
      <div class="box" v-for="item in doList" :key="item._id" @click="src=item.url;idialog = true">
        <img :src="item.picUrl" alt="" />
        <div class="message">
          <span size="mini">来源：{{ item.source }} <i :class="menuList[0].class"></i></span>
          <span size="mini" type="warning"
            >标题：{{ item.description }}</span
          >
          <span size="mini" type="danger">时间：{{ item.ctime }}</span>
        </div>
      </div>
    </div>
    <iframe :src="src" frameborder="0" v-show="idialog"></iframe>
  </div>
</template>

<script>
export default {
  data () {
    return {
      menuList: [
        {
          id: 1,
          icon: 'send-gift-o',
          text: '药品说明书查询',
          path: 'instructions',
          class: 'iconfont icon-yaopin'
        },
        {
          id: 2,
          icon: 'service-o',
          text: '营养成分查询',
          path: 'nutrients',
          class: 'iconfont icon-yingyangbaojian'
        },
        {
          id: 3,
          icon: 'todo-list-o',
          text: 'BMI标准体重查询',
          path: 'bmi',
          class: 'iconfont icon-BMIzice'
        },
        {
          id: 4,
          icon: 'user-o',
          text: '中药药性查询',
          path: 'medical',
          class: 'iconfont icon-zhongyao'
        },
        {
          id: 5,
          icon: 'calendar-o',
          text: '门诊预约',
          path: 'order',
          class: 'iconfont icon-ico_jiankangmenzhen_menzhenfayao'
        },
        {
          id: 6,
          icon: 'comment-o',
          text: '上门就诊预约',
          path: 'offline',
          class: 'iconfont icon-xxfw'
        }
      ],
      show: false,
      doList: [],
      src: '',
      idialog: false
    }
  },
  methods: {
    pathing (path) {
      if (path === 'infor') {
        this.show = true
      } else {
        this.$router.push('/' + path)
      }
    },
    onClickLeft () {
      this.idialog = false
    }
  },
  async created () {
    const { data: res } = await this.$http.get('/health/health/index?key=c92f20eb170cdc18ef07aeb080bebdc8&num=10')
    this.doList = res.newslist
  }
}
</script>

<style scoped>
@font-face {
  font-family: "iconfont"; /* Project id 3264414 */
  src: url('//at.alicdn.com/t/font_3264414_60js96bjsjc.woff2?t=1647849050906') format('woff2'),
       url('//at.alicdn.com/t/font_3264414_60js96bjsjc.woff?t=1647849050906') format('woff'),
       url('//at.alicdn.com/t/font_3264414_60js96bjsjc.ttf?t=1647849050906') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-yaopin:before {
  content: "\e602";
}

.icon-yingyangbaojian:before {
  content: "\e652";
}

.icon-ico_jiankangmenzhen_menzhenfayao:before {
  content: "\e8e5";
}

.icon-xxfw:before {
  content: "\e769";
}

.icon-BMIzice:before {
  content: "\e674";
}

.icon-zhongyao:before {
  content: "\e656";
}

.my-swipe {
  width: 100%;
  height: 200px;
}
.my-swipe img {
  width: 100%;
  height: 100%;
}
.doctor {
  width: 100%;
  height: 190px;
  overflow: scroll;
}
.doctor .box {
  display: flex;
  justify-content: space-between;
  border: 1px solid #1989fa;
  box-sizing: border-box;
  width: 90%;
  box-shadow: 2px 2px 5px #999;
  border-radius: 5px;
  margin: 2px auto;
  margin-bottom: 10px;
  align-items: center;
}
.doctor .box img {
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  margin: 3px;
  border: 1px solid pink;
  border-radius: 50%;
}
.doctor .box .message {
  flex: 1;
}
.doctor .box .el-tag {
  margin: 5px;
}
.doctor .box .el-button {
  margin-top: 22px;
  margin-right: 5px;
  border-radius: 5px;
}
.van-grid-item span{
  font-size: 12px;
  margin: 16px 0px 0 0;
  color: #000;
}
.van-grid-item i{
  font-size: 28px;
  color: lightpink;
  font-weight: 500;
}
.doctor span{
  font-size: 12px;
  color: #999;
}
iframe{
  position: absolute;
  width:100%;
  height: 100%;
  top: 48px;
  left: 0;
}
</style>
